<template>
  <div class="app-container">
    <el-form class="basic-form" ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="组织架构" prop="cover">
        <SingleImageUpload v-model="form.cover" />
      </el-form-item>

      <el-form-item>
        <el-button v-waves type="primary" @click="handleSubmit()">提交</el-button>
        <el-button v-waves @click="handleReset()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce';
import SingleImageUpload from '@/components/Upload/SingleImage';
import waves from '@/directive/waves';
import * as homeHttp from '@/api/home';

export default {
  name: 'news-edit',
  components: { Tinymce, SingleImageUpload },
  directives: { waves },
  data() {
    return {
      form: {},
      rules: {
        cover: [{ required: true, message: '请上传封面图', trigger: 'change' }]
      }
    }
  },

  methods: {
    handleSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;

        try {
          const res = await homeHttp.submitNews(this.form);

          if (!res.data.Data) throw new Error('上传失败');

          this.$message.success('提交成功');
        } catch(e) {
          console.log('news-center/edit: ', e);
          this.$message.error('提交失败');
        }
      });
    },

    handleReset() {
      this.$refs['form'].resetFields();
      this.$refs['tinymce'].setContent('');
    },
  }
}
</script>
